<template>
  <div class="evaUnfinished">
    <el-card>
      <h1>评价未完成学员名单</h1>
      <div class="select_s">
        请选择期数:
        <el-select v-model="schoolId" placeholder="请选择期数" @change="getUnFinished(schoolId)">
          <el-option
            v-for="(item,index) in opt_schoolId"
            :key="index"
            :label="item.cg_periods"
            :value="item.school_id">
          </el-option>
        </el-select>
      </div>
      <!-- 未完成评价用户数据列表 -->
      <el-table
        :data="userlist.slice((queryInfo.pagenum-1)*queryInfo.pagesize,queryInfo.pagenum*queryInfo.pagesize)"
        border
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="80"
          >
        </el-table-column>
        <el-table-column
          prop="stu_name"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          prop="stu_gender"
          label="性别">
        </el-table-column>
        <el-table-column
          prop="stu_number"
          label="学号">
        </el-table-column>
        <el-table-column
          prop="stu_tel"
          label="电话">
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  import eva_api from '@/api/evaluate';
  export default {
    name: "evaUnfinished",
    data(){
      return{
        schoolId: '',
        opt_schoolId:[],
        queryInfo: {
          query: '',
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 10
        },
        userlist: [],
        total: 0,
      }
    },
    mounted(){
      this.getAllSchool(); //加载页面时，获取期数信息
    },
    methods: {
      // 获取期数信息
      getAllSchool() {
        let that=this;
        eva_api.getALLSchool().then(function (resp) {
          if (resp.data.code == '200') {
              that.opt_schoolId = resp.data.data.list
              
          } else {
              that.$message.warning("期数获取失败!")
          }
        })
      },
      // 监听 pageSizeChange 改变的事件
      handleSizeChange(newSize) {
        var id = this.schoolId
        this.queryInfo.pagesize = newSize
        this.getUnFinished(id)
      },
      // 监听 页面值 改变的事件
      handleCurrentChange(newPage) {
        var id = this.schoolId
        this.queryInfo.pagenum = newPage
        this.getUnFinished(id)
      },
      //根据期数获取未完成评价学员名单
      getUnFinished(schoolId) {
        var that = this;
        var id = schoolId;
        eva_api.listOfNotCriticism(id).then(function(resp) {
          if (resp.data.code == '200') {
            that.total = resp.data.data.length;
            that.userlist = resp.data.data;
          } else {
            that.$message.error('未查到数据,请重试!');
          }
        })
      }
    },
  }
</script>

<style scoped>
.select_s {
  text-align: left;
}
.el-table {
  margin-top: 15px;
}
</style>
<style>
.init-box {
  overflow-y: scroll;
  height: 500px;
}
</style>